.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.j-start {
  justify-content: flex-start;
}

.j-end {
  justify-content: flex-end;
}

.j-center {
  justify-content: center;
}

.j-between {
  justify-content: space-between;
}

.j-around {
  justify-content: space-around;
}

.a-start {
  align-items: flex-start;
}

.a-center {
  align-items: center;
}

.a-end {
  align-items: flex-end;
}

@each $type in nowrap, wrap, wrap-reverse {
  .flex-#{$type} {
    flex-wrap: $type;
  }
}

@each $size in 1, 2, 3 {
  .flex-#{$size} {
    flex: $size;
  }
}

@for $i from 0 through 3 {
  .flex-s-#{$i} {
    flex-shrink: $i;
  }
}
